<template>
	<view>
		<u-navbar
			title=""
			@rightClick="goBack"
			:autoBack="true"
		>
			<view slot="center" style="width: 65%; margin-right: 100rpx;">
				<u-search height="35" @search="getSearchValueNew" @custom="getSearchValueNew" v-model="searchVal" placeholder="请输入线路或目的地" bgColor="#f1f1f1" :actionStyle="searchStyle" :showAction="true" ></u-search>
			</view>
		</u-navbar>
		<view class="recommend" v-if="goodsLists.length > 0">
			<goodsList v-for="(item,i) in goodsLists" :key="i" :info="item"></goodsList>
		</view>
		<view class="recommend" v-else>
			<u-empty mode="data" >
			</u-empty>
		</view>
	</view>
</template>

<script>
import searchVue from './search.vue'
	import goodsList from '@/components/goodsList.vue'
		import http from "@/apis/http.js";
	export default {
		data() {
			return {
				page:0,
				searchStyle:{
					'color':'#fff',
					'padding':'10rpx',
					'border-radius':'50rpx',
					'position':'absolute',
					'right':'200rpx',
					'background':'#5db9a0',
					'height':'20rpx',
					'line-height':'20rpx',
				},
				searchVal : '',
				goodsLists:[],
			}
		},
		components:{
			goodsList
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			getSearchValue()
			{
				http.POST('goods/goodsList',{'value':this.searchVal,'page':this.page}).then(res => {
					this.goodsLists.push(...res.data)
				})
			},
			getSearchValueNew()
			{
				this.page = 0;
				http.POST('goods/goodsList',{'value':this.searchVal,'page':this.page}).then(res => {
					this.goodsLists = res.data
				})
			}
		},
		onLoad(option){
			if(option.val){
				this.searchVal = option.val;
			}
			this.getSearchValue()
		},

		onReachBottom (){
			this.page++;
			this.getSearchValue()
			
		}
	}
</script>

<style>
	.recommend { 
		padding:180rpx 20rpx 0 20rpx;
		margin-bottom: 15rpx;
	}
</style>
